<template>
	<view class="shipin">
		<!-- 视频播放器 -->
		<view class="uni-padding-wrap uni-common-mt">
			<view>
				<video class="videx" id="myVideo" :src="playUrlMovie" autoplay controls></video>
			</view>
		</view>
		<!-- 视频剧集 -->
<!-- 		<view class="juji">
			<text v-for="(itam,index) in juji.movies" @click="bof(itam.movieId)">{{itam.movieName}}</text>
		</view> -->
		<!-- 横线 -->
		<hengxian></hengxian>
		
		<!-- 剧集简介 -->
<!-- 		<view class="juji_jj" style="color: #B31610;">
			达标剩余时长：{{movieViewTime}}
		</view> -->
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
				id:[],//任务id
				juji:[],
				playUrlMovie: "", //电影播放的url
				      commitMovieloading: false, //电影dialog加载
				      movieViewTime: "", //在线观影显示时间
				      movieViewInterval: "",
				      movieViewUseTime: "", //在线观影经过的时间
					  currentTime:'',
					  okTime:'',
					  commitStatus:'',
	        }
	    },
		onBackPress(){
			      if (this.movieViewInterval) clearInterval(this.movieViewInterval);
			      this.updateTaskedTime(3, this.movieViewUseTime, this.id);
		},
		onLoad(option) {
			let that = this;
			this.id = option.id
			this.playUrlMovie = option.playUrlMovie
			this.currentTime = option.time
			this.okTime = option.okTime
			this.commitStatus = option.commitStatus
			          
			          
			          let time = this.currentTime;
			          let okTime = this.okTime;
			          let count = 0;
			          that.movieViewUseTime = okTime - (okTime - time - count);
			          that.movieViewTime = that.formatTime(okTime - time - count);
					  uni.setNavigationBarTitle({
					  　　title:'达标剩余时长： '+that.movieViewTime
					  })
			          if (okTime - time - count <= 0) {
			            that.movieViewTime = "已完成";
						uni.setNavigationBarTitle({
						　　title:'达标剩余时长： '+that.movieViewTime
						})
			          }
			          if (that.commitStatus != 3)
			            that.movieViewInterval = setInterval(function () {
			              that.movieViewUseTime = okTime - (okTime - time - count);
			              that.movieViewTime = that.formatTime(okTime - time - count);
						  uni.setNavigationBarTitle({
						  　　title:'达标剩余时长： '+that.movieViewTime
						  })
			              if (okTime - time - count <= 0) {
			                clearInterval(that.movieViewInterval);
			                that.movieViewTime = "已完成";
							uni.setNavigationBarTitle({
							　　title:'达标剩余时长： '+that.movieViewTime
							})
			                that.updateTaskedTime(3, that.movieViewUseTime, that.id);
			              }
			              count++;
			            }, 1000);
				  
				  
		},
		created() {
			let that = this
			 // this.bofang2(that.id)

			 
		},
	    methods: {
			    //更新持续任务的时间
			    updateTaskedTime(Type, time, taskedId) {
			      let that = this;
			      if (that.commitStatus != 3)
			        that.pyReq(
			          that.$http.updateTaskedTime,
			          { Type: Type, time: time, taskedId: taskedId },
			          function (res) {}
			        );
			    },
			    //将时间格式化为 分钟:秒钟
			    formatTime(second) {
			      let min = Math.floor(second / 60);
			      let sec = second % 60;
			      if (sec < 10) return min + "：0" + sec;
			      else return min + "：" + sec;
			    },
	        // videoErrorCallback: function(e) {
	        //     uni.showModal({
	        //         content: e.target.errMsg,
	        //         showCancel: false
	        //     })
	        // }
			bof(id){
				console.log(id)
				this.bofang(id)
			},
			bofang(id){
				// let that = this
				// let params = {
				// 	"id":id
				// }
				// that.pyReq(that.$http.getMovieDetail,params,function(res){
				// 		  that.juji = res.result
				// 		  console.log(that.juji);
				// });
			},
			bofang2(id){
				// let that = this
				// let params = {
				// 	"id":id
				// }
				// that.pyReq(that.$http.getMovieDetailAPP,params,function(res){
				// 		  that.juji = res.result
				// 		  console.log(that.juji);
				// });

			}
	    }
	}
</script>

<style>
	.shipin{
		/* margin: 30upx 30upx; */
	}
	.videx{
		width: 664upx;
		height: 447upx;
		margin-left: 10upx;
	}
	.juji{
		margin: 0upx 50upx;
		padding: 20upx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.juji text{
		width: 193upx;
		display: block;
		font-size: 24upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		margin: 20upx 0;
	}
	.juji_jj{
		 margin: 30upx 40upx; 
	}
	.juji_jj text{
		display: block;
	}
	.juji_jj_t{
		font-size:30upx;
		font-weight: 700;
	}
	.juji_jj_c{
		font-size: 26upx;
		line-height: 50upx;
		margin: 20upx 0;
	}
</style>
